JavaScript 事件——“内存和性能”的注意要点

事件委托

对“事件处理程序过多”的问题的解决方案就是事件委托。例如，click事件会一直冒泡到document层次。也就是说，我们可以为整个页面指定一个onclick事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。如下面的代码：

<ul id="list">
    <li id="go">go baidu.com</li>
    <li id="do">change body color</li>
    <li id="pop">hello world</li>
</ul>

添加事件处理程序：

var item1 = document.getElementById("go");
var item2 = document.getElementById("do");
var item3 = document.getElementById("pop");

item1.addEventListener("click", function () {
    location.href = "http://www.baidu.com";
});
item2.addEventListener("click", function () {
    document.body.style.backgroundColor = "#ccc";
});
item3.addEventListener("click", function () {
    console.log("hello world");
});

这样写会有数不清的代码用于添加事件处理程序，但如果利用事件委托技术，就可以用比较少的代码解决这个问题：

var list = document.getElementById("list");
function handleEvent() {
    switch (event.type) {
        case "click":
            switch (event.target.id) {
                case "go":
                    location.href = "http://www.baidu.com";
                    break;
                case "do":
                    document.body.style.backgroundColor = "#ccc";
                    break;
                case "pop":
                    console.log("hello world");
                    break;
            }
            break;
        case "dblclick":
            if (event.target.id == "list") {
                list.style.visibility = "hidden";
            };
            break;
    }
}
list.addEventListener("click", handleEvent);
list.addEventListener("dblclick", handleEvent);

这样就轻松加愉快的解决问题了。

另外，如果可行的话，可以考虑为document对象添加一个事件处理程序，用以处理页面上发声的某种特定的事件。

最适合采用事件委托技术的事件包括click、mousedown、mouseup、keydown、keyup和keypress。

移除事件处理程序

通常造成空事件处理程序的原因有可能是DOM操作（removeChild()等）、或使用innerHTML等。如：

var btn = document.getElementById("btn");
btn.addEventListener("click", btnHandler);
function btnHandler () {
    switch (event.type) {
        case "click":
            document.getElementById("myDiv").innerHTML = "Processing...";
            break;
    }
}

在div元素中设置innerHTML可以把按钮移走，但事件处理程序依然与按钮保持引用关系，所以最好设置成如下：

var btn = document.getElementById("btn");
btn.addEventListener("click", btnHandler);
function btnHandler () {
    switch (event.type) {
        case "click":
            // do something
            btn.onclick = null;
            document.getElementById("myDiv").innerHTML = "Processing...";
            break;
    }
}

在事件处理程序中删除按钮也能阻止事件冒泡

另外，在页面卸载之前，也应该通过onunload事件处理程序移除所有事件处理程序。以防止部分浏览器出现内存问题。